<template>
  <div class="module-card">
    <div class="module-header">
      <h3>成员管理</h3>
      <button 
        @click="showAddMemberDialog = true" 
        class="btn-primary"
        :class="{ 'pulse-effect': hovered }"
        @mouseenter="hovered = true"
        @mouseleave="hovered = false"
      >
        <i class="icon-plus"></i> 添加成员
      </button>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input-group">
        <i class="icon-search"></i>
        <input 
          type="text" 
          v-model="searchQuery"
          placeholder="搜索成员姓名、学号或部门..."
          @input="debounceSearch"
          class="search-input"
        />
        <button @click="resetSearch" class="reset-btn" v-if="searchQuery">
          <i class="icon-times"></i>
        </button>
      </div>
      <div class="search-filters">
        <select v-model="selectedDepartment" class="filter-select" @change="filterMembers">
          <option value="">全部部门</option>
          <option v-for="dept in departments" :key="dept.id" :value="dept.id">
            {{ dept.name }}
          </option>
        </select>
        <select v-model="selectedRole" class="filter-select" @change="filterMembers">
          <option value="">全部角色</option>
          <option value="admin">管理员</option>
          <option value="member">成员</option>
          <option value="trainee">实习生</option>
        </select>
      </div>
    </div>
    
    <!-- 成员列表 -->
    <div class="member-table-container">
      <table class="member-table">
        <thead>
          <tr>
            <th width="80">序号</th>
            <th width="120">姓名</th>
            <th width="150">学号/工号</th>
            <th width="120">部门</th>
            <th width="100">角色</th>
            <th width="120">学院</th>
            <th width="150">入社时间</th>
            <th width="180">联系方式</th>
            <th width="120">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr 
            v-for="(member, index) in paginatedMembers" 
            :key="member.id"
            :class="{ 'highlight-row': member.id === selectedMemberId }"
          >
            <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
            <td class="member-name" @click="viewMemberDetail(member.id)">{{ member.name }}</td>
            <td>{{ member.studentId }}</td>
            <td>{{ getDepartmentName(member.departmentId) }}</td>
            <td><span class="role-tag" :class="member.role">{{ getRoleName(member.role) }}</span></td>
            <td>{{ member.college }}</td>
            <td>{{ formatJoinDate(member.joinDate) }}</td>
            <td>{{ member.phone || member.email || '暂无' }}</td>
            <td class="action-buttons">
              <button 
                @click="editMember(member)" 
                class="action-btn edit-btn"
                title="编辑"
              >
                <i class="icon-edit"></i>
              </button>
              <button 
                @click="deleteMember(member.id)" 
                class="action-btn delete-btn"
                title="删除"
              >
                <i class="icon-trash-o"></i>
              </button>
            </td>
          </tr>
          <tr v-if="filteredMembers.length === 0">
            <td colspan="9" class="empty-row">
              <i class="icon-search"></i>
              <p>{{ searchQuery || selectedDepartment || selectedRole ? '没有找到匹配的成员' : '暂无成员数据' }}</p>
              <button v-if="!searchQuery && !selectedDepartment && !selectedRole" @click="showAddMemberDialog = true" class="btn-primary">
                添加第一位成员
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 分页 -->
    <div class="pagination" v-if="filteredMembers.length > 0">
      <div class="pagination-info">
        共 {{ filteredMembers.length }} 条记录，每页显示 {{ pageSize }} 条
      </div>
      <div class="pagination-controls">
        <button 
          @click="currentPage = 1" 
          :disabled="currentPage === 1"
          class="page-btn"
        >
          <i class="icon-angle-double-left"></i>
        </button>
        <button 
          @click="prevPage"
          :disabled="currentPage === 1"
          class="page-btn"
        >
          <i class="icon-angle-left"></i>
        </button>
        <div class="page-numbers">
          <button 
            v-for="num in visiblePageNumbers"
            :key="num"
            @click="currentPage = num"
            :class="{ 'active': currentPage === num }"
            class="page-number"
          >
            {{ num }}
          </button>
        </div>
        <button 
          @click="nextPage"
          :disabled="currentPage === totalPages"
          class="page-btn"
        >
          <i class="icon-angle-right"></i>
        </button>
        <button 
          @click="currentPage = totalPages"
          :disabled="currentPage === totalPages"
          class="page-btn"
        >
          <i class="icon-angle-double-right"></i>
        </button>
      </div>
      <div class="page-size-selector">
        <label>每页显示:</label>
        <select v-model.number="pageSize" @change="currentPage = 1" class="page-size-input">
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
    </div>
    
    <!-- 添加/编辑成员弹窗 -->
    <div class="modal-overlay" v-if="showAddMemberDialog || showEditMemberDialog" @click="closeMemberDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ showEditMemberDialog ? '编辑成员' : '添加成员' }}</h3>
          <button @click="closeMemberDialog" class="close-btn">&times;</button>
        </div>
        
        <div class="modal-body">
          <form @submit.prevent="saveMember">
            <div class="form-row">
              <div class="form-group">
                <label for="member-name">姓名 <span class="required">*</span></label>
                <input 
                  id="member-name"
                  type="text" 
                  v-model="memberForm.name"
                  required
                  placeholder="请输入成员姓名"
                  class="form-input"
                />
              </div>
              <div class="form-group">
                <label for="member-id">学号/工号 <span class="required">*</span></label>
                <input 
                  id="member-id"
                  type="text" 
                  v-model="memberForm.studentId"
                  required
                  placeholder="请输入学号/工号"
                  class="form-input"
                />
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="member-department">部门 <span class="required">*</span></label>
                <select 
                  id="member-department"
                  v-model="memberForm.departmentId"
                  required
                  class="form-input"
                >
                  <option v-for="dept in departments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label for="member-role">角色 <span class="required">*</span></label>
                <select 
                  id="member-role"
                  v-model="memberForm.role"
                  required
                  class="form-input"
                >
                  <option value="admin">管理员</option>
                  <option value="member">成员</option>
                  <option value="trainee">实习生</option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="member-college">学院 <span class="required">*</span></label>
                <input 
                  id="member-college"
                  type="text" 
                  v-model="memberForm.college"
                  required
                  placeholder="请输入学院"
                  class="form-input"
                />
              </div>
              <div class="form-group">
                <label for="member-major">专业</label>
                <input 
                  id="member-major"
                  type="text" 
                  v-model="memberForm.major"
                  placeholder="请输入专业"
                  class="form-input"
                />
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="member-phone">联系电话</label>
                <input 
                  id="member-phone"
                  type="text" 
                  v-model="memberForm.phone"
                  placeholder="请输入联系电话"
                  class="form-input"
                />
              </div>
              <div class="form-group">
                <label for="member-email">电子邮箱</label>
                <input 
                  id="member-email"
                  type="email" 
                  v-model="memberForm.email"
                  placeholder="请输入电子邮箱"
                  class="form-input"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label for="member-position">职位</label>
              <input 
                id="member-position"
                type="text" 
                v-model="memberForm.position"
                placeholder="请输入职位"
                class="form-input"
              />
            </div>
            
            <div class="form-group">
              <label for="member-joinDate">入社时间 <span class="required">*</span></label>
              <input 
                id="member-joinDate"
                type="date" 
                v-model="memberForm.joinDate"
                required
                class="form-input"
              />
            </div>
            
            <div class="form-actions">
              <button type="button" @click="closeMemberDialog" class="btn-secondary">取消</button>
              <button type="submit" class="btn-primary" :disabled="saving">
                {{ saving ? '保存中...' : '保存' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 成员详情弹窗 -->
    <div class="modal-overlay" v-if="showMemberDetail" @click="closeMemberDetail">
      <div class="modal-content detail-modal" @click.stop>
        <div class="modal-header">
          <h3>成员详情</h3>
          <button @click="closeMemberDetail" class="close-btn">&times;</button>
        </div>
        
        <div class="modal-body">
          <div v-if="selectedMember" class="member-detail-content">
            <div class="detail-header">
              <div class="avatar-container">
                <img v-if="selectedMember.avatar" :src="selectedMember.avatar" alt="头像" class="avatar">
                <div v-else class="avatar-placeholder">
                  {{ getInitial(selectedMember.name) }}
                </div>
              </div>
              <div class="detail-basic-info">
                <h4>{{ selectedMember.name }}</h4>
                <div class="detail-meta">
                  <span class="department-tag">{{ getDepartmentName(selectedMember.departmentId) }}</span>
                  <span class="role-tag" :class="selectedMember.role">{{ getRoleName(selectedMember.role) }}</span>
                </div>
              </div>
            </div>
            
            <div class="detail-grid">
              <div class="detail-item">
                <span class="detail-label">学号/工号:</span>
                <span class="detail-value">{{ selectedMember.studentId }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">职位:</span>
                <span class="detail-value">{{ selectedMember.position || '暂无' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">学院:</span>
                <span class="detail-value">{{ selectedMember.college }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">专业:</span>
                <span class="detail-value">{{ selectedMember.major || '暂无' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">联系电话:</span>
                <span class="detail-value">{{ selectedMember.phone || '暂无' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">电子邮箱:</span>
                <span class="detail-value">{{ selectedMember.email || '暂无' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">入社时间:</span>
                <span class="detail-value">{{ formatJoinDate(selectedMember.joinDate) }}</span>
              </div>
            </div>
            
            <div class="contribution-stats">
              <h5>部门贡献</h5>
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-value">{{ selectedMember.stats?.attendanceRate || 0 }}%</div>
                  <div class="stat-label">出勤率</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ selectedMember.stats?.completedTasks || 0 }}</div>
                  <div class="stat-label">完成任务</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ selectedMember.stats?.attendedMeetings || 0 }}</div>
                  <div class="stat-label">参与会议</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ selectedMember.stats?.score || 0 }}</div>
                  <div class="stat-label">积分</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 状态管理
const members = ref([])
const departments = ref([
  { id: 1, name: '财务部' },
  { id: 2, name: '人事部' },
  { id: 3, name: '市场部' },
  { id: 4, name: '技术部' },
  { id: 5, name: '办公室' },
  { id: 6, name: '销售部' }
])
const searchQuery = ref('')
const selectedDepartment = ref('')
const selectedRole = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const hovered = ref(false)
const saving = ref(false)
const selectedMemberId = ref(null)
const selectedMember = ref(null)
const showAddMemberDialog = ref(false)
const showEditMemberDialog = ref(false)
const showMemberDetail = ref(false)
const memberForm = ref({
  id: '',
  name: '',
  studentId: '',
  departmentId: 5,
  role: 'member',
  college: '',
  major: '',
  phone: '',
  email: '',
  position: '',
  joinDate: ''
})

// 防抖搜索定时器
let searchTimer = null

// 计算属性：过滤后的成员列表
const filteredMembers = computed(() => {
  return members.value.filter(member => {
    // 搜索条件过滤
    const matchesSearch = !searchQuery.value || 
      member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      member.studentId.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      getDepartmentName(member.departmentId).toLowerCase().includes(searchQuery.value.toLowerCase())
    
    // 部门过滤
    const matchesDepartment = !selectedDepartment.value || member.departmentId === selectedDepartment.value
    
    // 角色过滤
    const matchesRole = !selectedRole.value || member.role === selectedRole.value
    
    return matchesSearch && matchesDepartment && matchesRole
  })
})

// 计算属性：分页后的成员列表
const paginatedMembers = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return filteredMembers.value.slice(startIndex, endIndex)
})

// 计算属性：总页数
const totalPages = computed(() => {
  return Math.ceil(filteredMembers.value.length / pageSize.value)
})

// 计算属性：可见页码
const visiblePageNumbers = computed(() => {
  const pageNumbers = []
  const maxVisiblePages = 5
  let startPage = Math.max(1, currentPage.value - Math.floor(maxVisiblePages / 2))
  let endPage = startPage + maxVisiblePages - 1
  
  if (endPage > totalPages.value) {
    endPage = totalPages.value
    startPage = Math.max(1, endPage - maxVisiblePages + 1)
  }
  
  for (let i = startPage; i <= endPage; i++) {
    pageNumbers.push(i)
  }
  
  return pageNumbers
})

// 获取部门名称
const getDepartmentName = (departmentId) => {
  const department = departments.value.find(dept => dept.id === departmentId)
  return department ? department.name : '未知部门'
}

// 获取角色名称
const getRoleName = (role) => {
  const roleMap = {
    admin: '管理员',
    member: '成员',
    trainee: '实习生'
  }
  return roleMap[role] || '未知角色'
}

// 获取姓名首字母
const getInitial = (name) => {
  if (!name) return ''
  return name.charAt(0).toUpperCase()
}

// 格式化入社日期
const formatJoinDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取成员列表
const fetchMembers = async () => {
  try {
    const response = await fetch('http://localhost:8080/user/department/5')
    const result = await response.json()
    if (result.code === 200) {
      members.value = result.data
    } else {
      console.error('获取成员列表失败:', result.message)
      showToast('获取成员列表失败', 'error')
    }
  } catch (error) {
    console.error('获取成员列表失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  }
}

// 防抖搜索
const debounceSearch = () => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  searchTimer = setTimeout(() => {
    currentPage.value = 1
  }, 500)
}

// 重置搜索
const resetSearch = () => {
  searchQuery.value = ''
  currentPage.value = 1
}

// 过滤成员
const filterMembers = () => {
  currentPage.value = 1
}

// 分页功能
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 查看成员详情
const viewMemberDetail = async (id) => {
  selectedMemberId.value = id
  try {
    // 获取成员详情
    const response = await fetch(`http://localhost:8080/user/${id}`)
    const result = await response.json()
    
    if (result.code === 200) {
      // 获取成员扩展信息
      const userInfoResponse = await fetch(`http://localhost:8080/userInfo/user/${id}`)
      const userInfoResult = await userInfoResponse.json()
      
      if (userInfoResult.code === 200) {
        // 获取成员统计信息
        const statsResponse = await fetch(`http://localhost:8080/user/stats/${id}/department/5`)
        const statsResult = await statsResponse.json()
        
        selectedMember.value = {
          ...result.data,
          ...userInfoResult.data,
          stats: statsResult.code === 200 ? statsResult.data : null
        }
        
        showMemberDetail.value = true
      }
    } else {
      console.error('获取成员详情失败:', result.message)
      showToast('获取成员详情失败', 'error')
    }
  } catch (error) {
    console.error('获取成员详情失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  }
}

// 编辑成员
const editMember = (member) => {
  showAddMemberDialog.value = false
  showEditMemberDialog.value = true
  memberForm.value = { ...member }
}

// 删除成员
const deleteMember = async (id) => {
  if (!confirm('确定要删除这个成员吗？删除后无法恢复。')) return
  
  try {
    const response = await fetch(`http://localhost:8080/user/${id}`, {
      method: 'DELETE'
    })
    
    const result = await response.json()
    if (result.code === 200) {
      members.value = members.value.filter(member => member.id !== id)
      showToast('成员删除成功', 'success')
    } else {
      console.error('删除成员失败:', result.message)
      showToast('删除成员失败', 'error')
    }
  } catch (error) {
    console.error('删除成员失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  }
}

// 保存成员
const saveMember = async () => {
  // 表单验证
  if (!memberForm.value.name || !memberForm.value.studentId || !memberForm.value.college || !memberForm.value.joinDate) {
    showToast('请填写所有必填字段', 'warning')
    return
  }
  
  saving.value = true
  try {
    // 检查用户是否已存在
    const checkUserResponse = await fetch(`http://localhost:8080/user/check?studentId=${memberForm.value.studentId}`)
    const checkUserResult = await checkUserResponse.json()
    
    if (checkUserResult.code === 200 && checkUserResult.data.exists && checkUserResult.data.userId !== memberForm.value.id) {
      showToast('该学号/工号已被使用', 'warning')
      saving.value = false
      return
    }
    
    let userResponse, userResult
    
    if (showEditMemberDialog.value) {
      // 编辑用户
      userResponse = await fetch(`http://localhost:8080/user/${memberForm.value.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: memberForm.value.name,
          studentId: memberForm.value.studentId,
          departmentId: memberForm.value.departmentId,
          role: memberForm.value.role
        })
      })
      userResult = await userResponse.json()
    } else {
      // 创建用户
      userResponse = await fetch('http://localhost:8080/user/create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: memberForm.value.name,
          studentId: memberForm.value.studentId,
          departmentId: memberForm.value.departmentId,
          role: memberForm.value.role,
          password: '123456' // 默认密码，用户首次登录后应修改
        })
      })
      userResult = await userResponse.json()
    }
    
    if (userResult.code === 200) {
      const userId = showEditMemberDialog.value ? memberForm.value.id : userResult.data.userId
      
      // 保存用户扩展信息
      const userInfoResponse = await fetch('http://localhost:8080/userInfo', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          userId,
          college: memberForm.value.college,
          major: memberForm.value.major,
          phone: memberForm.value.phone,
          email: memberForm.value.email,
          position: memberForm.value.position,
          joinDate: memberForm.value.joinDate,
          departmentId: 5
        })
      })
      
      const userInfoResult = await userInfoResponse.json()
      if (userInfoResult.code === 200) {
        // 刷新成员列表
        await fetchMembers()
        closeMemberDialog()
        showToast(showEditMemberDialog.value ? '成员信息更新成功' : '成员添加成功', 'success')
      } else {
        console.error('保存用户扩展信息失败:', userInfoResult.message)
        showToast('保存用户扩展信息失败', 'error')
      }
    } else {
      console.error('保存成员信息失败:', userResult.message)
      showToast('保存成员信息失败', 'error')
    }
  } catch (error) {
    console.error('保存成员信息失败:', error)
    showToast('无法连接到服务器，请稍后重试', 'error')
  } finally {
    saving.value = false
  }
}

// 关闭成员对话框
const closeMemberDialog = () => {
  showAddMemberDialog.value = false
  showEditMemberDialog.value = false
  memberForm.value = {
    id: '',
    name: '',
    studentId: '',
    departmentId: 5,
    role: 'member',
    college: '',
    major: '',
    phone: '',
    email: '',
    position: '',
    joinDate: ''
  }
}

// 关闭成员详情对话框
const closeMemberDetail = () => {
  showMemberDetail.value = false
  selectedMemberId.value = null
  selectedMember.value = null
}

// 显示提示信息
const showToast = (message, type = 'info') => {
  // 这里可以根据实际项目中的toast组件来实现
  alert(message)
}

// 组件挂载时获取成员列表
onMounted(() => {
  fetchMembers()
})
</script>

<style>
/* 全局模块容器样式 */
.module-card {
  width: 100%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.module-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 按钮样式 */
.btn-primary {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
  background: #66b1ff;
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* 搜索区域 */
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.search-input-group {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
}

.search-input-group i {
  position: absolute;
  left: 12px;
  color: #909399;
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.reset-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #909399;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: #f0f0f0;
  color: #606266;
}

.search-filters {
  display: flex;
  gap: 12px;
}

.filter-select {
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #409eff;
}

/* 表格样式 */
.member-table-container {
  overflow-x: auto;
  margin-bottom: 24px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.member-table {
  width: 100%;
  border-collapse: collapse;
}

.member-table th,
.member-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.member-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.member-table tbody tr:hover {
  background: #f8f9fa;
}

.highlight-row {
  background: #ecf5ff !important;
}

.member-name {
  font-weight: 500;
  color: #409eff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.member-name:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 角色标签 */
.role-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.role-tag.admin {
  background: #e6f7ff;
  color: #1890ff;
}

.role-tag.member {
  background: #f6ffed;
  color: #52c41a;
}

.role-tag.trainee {
  background: #fff7e6;
  color: #fa8c16;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.edit-btn {
  color: #409eff;
}

.edit-btn:hover {
  background: #409eff;
  color: white;
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background: #f56c6c;
  color: white;
}

/* 空行 */
.empty-row {
  text-align: center;
  padding: 60px 20px !important;
  color: #909399;
}

.empty-row i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-row p {
  font-size: 16px;
  margin-bottom: 24px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.pagination-info {
  font-size: 14px;
  color: #666;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  background: white;
  border: 1px solid #dcdfe6;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  border-color: #409eff;
  color: #409eff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  background: white;
  border: 1px solid #dcdfe6;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 14px;
}

.page-number:hover:not(.active) {
  border-color: #409eff;
  color: #409eff;
}

.page-number.active {
  background: #409eff;
  border-color: #409eff;
  color: white;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector label {
  font-size: 14px;
  color: #666;
}

.page-size-input {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.detail-modal {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #909399;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #606266;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.required {
  color: #f56c6c;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* 成员详情内容 */
.member-detail-content {
  margin-top: 16px;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  margin-right: 24px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #f0f0f0;
}

.avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #67c23a);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: 600;
  color: white;
}

.detail-basic-info h4 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.detail-meta {
  display: flex;
  gap: 12px;
}

.department-tag {
  background: #e6f7ff;
  color: #1890ff;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.detail-label {
  font-weight: 500;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.detail-value {
  color: #333;
  flex: 1;
}

/* 贡献统计 */
.contribution-stats h5 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 动画效果 */
.pulse-effect {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-group {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .module-card {
    padding: 20px;
    margin: 16px;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .pagination {
    flex-direction: column;
    gap: 16px;
  }
  
  .detail-header {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-container {
    margin-right: 0;
    margin-bottom: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .search-filters {
    flex-direction: column;
  }
  
  .pagination-controls {
    overflow-x: auto;
    padding: 8px 0;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>